<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartRadar',
  props: {
    text: String
  },
  mounted () {
    this.$nextTick(() => {
      let option = {
        title: {
          text: this.text,
          x: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: false},
            saveAsImage: {show: false}
          }
        },
        polar: [
          {
            indicator: [
              { text: '北', max: 100},
              { text: '西北', max: 100},
              { text: '西', max: 100},
              { text: '西南', max: 100},
              { text: '南', max: 100},
              { text: '东南', max: 100},
              { text: '东', max: 100},
              { text: '东北', max: 100}
            ]
          }
        ],
        calculable: true,
        series: [
          {
            name: '当前数据值',
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [
              {
                value: [50, 30, 40, 30, 40, 50, 55, 80],
                name: this.text
              }
            ]
          }
        ]
      }
      let dom = echarts.init(this.$refs.dom, 'tdTheme')
      dom.setOption(option)
    })
  }
}
</script>

<style lang="less">

</style>
